import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import api from '../../service/api';
import classNames from 'classnames';
import { AtIcon } from 'taro-ui';
import './index.less'

export default class Payment extends Taro.Component {

  config = {
    navigationBarTitleText: '购买次数'
  }

  constructor() {
    super(...arguments)
    this.state = {
      combo:true,
      single:'',
      amount:'99',
      evenPoint:true
    }
  }

  choosePay = (e) =>{
    if(e == '99'){
      this.setState({
        amount:e,
        combo:true,
        single:false
      })
    }else{
      this.setState({
        amount:e,
        combo:false,
        single:true
      })
    }
  }

  pay = () =>{
    if(this.state.evenPoint == false){
      return false
    }
    this.setState({
      evenPoint:false
    })

    let params = {}
    let that = this
    params.amount = this.state.amount
    params.userId = Taro.getStorageSync('loginInfo').userId
    //获取医生列表
    api.get('/pay/orders',params).then(res => {
      Taro.requestPayment({
        timeStamp: res.data.timeStamp,
        nonceStr: res.data.nonceStr,
        package: res.data.package,
        signType: 'MD5',
        paySign: res.data.paySign,
        success (res) {
          Taro.showToast({
            title: '成功',
            icon: 'success',
            duration: 2000
          })

          that.setState({
            evenPoint:true
          })
          if(that.$router.params.paystatus == '1'){
            Taro.navigateBack({
              delta:1
            })
          }
        },
        fail (res) {
          Taro.setStorage({
            key:'nowCount',
            data:'99'
          })
          Taro.showToast({
            title: '支付失败',
            icon:'none',
            duration: 2000
          })
          that.setState({
            evenPoint:true
          })
        }
      })
    })
  }

  render() {

    let payBtnCombo = classNames({
      'pay-items':true,
      'active':this.state.combo
    })
    let payBtnSingle = classNames({
      'pay-items':true,
      'active':this.state.single
    })

    return (
      <View className='page'>
        <View className='page-top'>
        </View>
        <View className='page-main'>
          <View className='at-row at-row__justify--center'>
            <View className='at-col at-col-6 pay'>

                <View className={payBtnCombo} onClick={this.choosePay.bind(this,'99')}>
                  <View className='pay-items-label'>活动</View>
                  <View className='pay-items-title'>4次问诊服务</View>
                  <View className='pay-items-money'>
                    <Text className='pay-items-rmb'>￥</Text>99
                  </View>
                  <View className='pay-items-right'>
                    <AtIcon prefixClass='icon' value='goumaixuanzhong' size='60' color='#fff'></AtIcon>
                  </View>
                </View>

            </View>
            <View className='at-col at-col-6 pay'>

                <View className={payBtnSingle} onClick={this.choosePay.bind(this,'30')}>
                  <View className='pay-items-title'>单次问诊服务</View>
                  <View className='pay-items-money'>
                    <Text className='pay-items-rmb'>￥</Text>30
                  </View>
                  <View className='pay-items-right'>
                    <AtIcon prefixClass='icon' value='goumaixuanzhong' size='60' color='#fff'></AtIcon>
                  </View>
                </View>

            </View>
          </View>
        </View>
        <View className='page-bottom'>
          <View className='page-bottom-btn' onClick={this.pay.bind(this)}>
              <View>
                提交
              </View>
            </View>
        </View>
      </View>
    )
  }
}
